﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link href="../../resources/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

    <script src="../../resources/lib/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../resources/lib/jquery/jquery.form.min.js" type="text/javascript"></script>
    <script src="../../resources/lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script>
    <!--<script src="../../resources/lib/TempletData.js"></script>
    <script src="../../resources/lib/citylink.js"></script>-->
    <script type="text/javascript">
        // TODO: 通过模板引擎插入
        var EmployeeData = { Rows: [
            { "__status": null, "ID": 1, "DepartmentID": 3, "RealName": "fewf", "DepartmentName": "销售部", "gender": "男", "Age": 2433, "IncomeDay": new Date(1301356800000), "Phone": "159244332", "Address": "变为不为恶" },
            { "__status": null, "ID": 2, "DepartmentID": 1, "RealName": "李三34", "DepartmentName": "主席", "gender": "女", "Age": 23, "IncomeDay": new Date(1301299200000), "Phone": "2323232323", "Address": "3434" },
            { "__status": null, "ID": 3, "DepartmentID": 3, "RealName": "吴彬3", "DepartmentName": "销售部", "gender": "男", "Age": 26, "IncomeDay": new Date(1294128000000), "Phone": "159244332", "Address": "1311飞屋服务费3434343433434" },
            { "__status": null, "ID": 5, "DepartmentID": 2, "RealName": "吴久", "DepartmentName": "研发中心", "gender": "女", "Age": 29, "IncomeDay": new Date(1288569600000), "Phone": "159244332", "Address": "3444444" },
            { "__status": null, "ID": 6, "DepartmentID": 3, "RealName": "陈民", "DepartmentName": "销售部", "gender": "男", "Age": 21, "IncomeDay": new Date(1297728000000), "Phone": null, "Address": "3435333" },
            { "__status": null, "ID": 7, "DepartmentID": 3, "RealName": "陈留", "DepartmentName": "销售部", "gender": "女", "Age": 32, "IncomeDay": new Date(1298851200000), "Phone": null, "Address": "3333444444444444" },
            { "__status": null, "ID": 8, "DepartmentID": 1, "RealName": "谢银223", "DepartmentName": "主席", "gender": "男", "Age": 13, "IncomeDay": new Date(1298880000000), "Phone": null, "Address": "34344555555555" },
            { "__status": null, "ID": 10, "DepartmentID": 2, "RealName": "陈元为2", "DepartmentName": "研发中心", "gender": "女", "Age": 16, "IncomeDay": new Date(1298851200000), "Phone": null, "Address": "34343434343434" },
            { "__status": null, "ID": 11, "DepartmentID": 1, "RealName": "大为", "DepartmentName": "主席", "gender": "男", "Age": 19, "IncomeDay": new Date(1301472000000), "Phone": null, "Address": "3434444444" },
            { "__status": null, "ID": 21, "DepartmentID": 4, "RealName": "444", "DepartmentName": "市场部", "gender": "女", "Age": 20, "IncomeDay": new Date(1298880000000), "Phone": null, "Address": "444" },
            { "__status": null, "ID": 22, "DepartmentID": 1, "RealName": "22", "DepartmentName": "主席", "gender": "男", "Age": 20, "IncomeDay": new Date(1301270400000), "Phone": null, "Address": "22" },
            { "__status": null, "ID": 23, "DepartmentID": 2, "RealName": "22", "DepartmentName": "研发中心", "gender": "女", "Age": 20, "IncomeDay": new Date(1301270400000), "Phone": null, "Address": "2224444444" },
            { "__status": null, "ID": 26, "DepartmentID": 4, "RealName": "232323", "DepartmentName": "市场部", "gender": "男", "Age": 0, "IncomeDay": new Date(1306108800000), "Phone": null, "Address": "222222222222222"}
        ], Total: 13 };
        var DepartmentData = { Rows: [
            { "DepartmentID": 1, "DepartmentName": "主席", "DepartmentRemark": null },
            { "DepartmentID": 2, "DepartmentName": "研发中心", "DepartmentRemark": null },
            { "DepartmentID": 3, "DepartmentName": "销售部", "DepartmentRemark": null },
            { "DepartmentID": 4, "DepartmentName": "市场部", "DepartmentRemark": null },
            { "DepartmentID": 5, "DepartmentName": "顾问组", "DepartmentRemark": null}
        ], Total: 5 };

        var DepartmentList = DepartmentData.Rows;
        var genderItems = [{ text: '男' }, { text: '女'}];
        var manager, g;
        $(function() {
            //var form = $("#form1").ligerForm({ inputWidth: 100 });
            $('#form1').ajaxForm(function() {
                alert("form1 ajax submit end!");
            });
            g = manager = $("#maingrid").ligerGrid({
                columns: [{
                    display: '姓名', width: 80, name: 'RealName', editor: { type: 'text' }
                }, {
                    display: '性别', width: 50, name: 'gender', type: 'int',
                    editor: { type: 'select', data: genderItems, valueField:'text'},
                    render: function (item, index, value) {
                        return value;
                    }
                }, {
                    display: '年龄', name: 'Age', width: 50, type: 'int', editor: { type: 'int'}
                },  { display: '部门', name: 'DepartmentID', width: 80, isSort: false,
                    editor: { type: 'select', data: DepartmentList, valueColumnName: 'DepartmentID', displayColumnName: 'DepartmentName' }, render: function (item)
                    {
                        for (var i = 0; i < DepartmentList.length; i++)
                        {
                            if (DepartmentList[i]['DepartmentID'] == item.DepartmentID)
                                return DepartmentList[i]['DepartmentName']
                        }
                        return item.DepartmentName;
                    }
                },
                    {
                    display: '操作', isSort: false,
                    render: function (rowdata, rowindex, value) {
                        var h = "";
                        if (!rowdata._editing) {
                            h += "<a href='javascript:beginEdit(" + rowindex + ")'>修改</a> ";
                            h += "<a href='javascript:deleteRow(" + rowindex + ")'>删除</a> ";
                        } else {
                            h += "<a href='javascript:endEdit(" + rowindex + ")'>提交</a> ";
                            h += "<a href='javascript:cancelEdit(" + rowindex + ")'>取消</a> ";
                        }
                        return h;
                    }
                }],
               /* onSelectRow: function (rowdata, rowindex) {
                    $("#txtrowindex").val(rowindex);
                },*/
                onSelectRow: function(rowdata, rowindex) {
                    //alert(rowindex.substring(3));
                    if(rowindex.substring(3)%3==1){
                        //$("#form1 input[name=Name]").val("授权模板1");
                        $("#form1 input[name=cardId]").val("111");
                        $("#form1 input[name=type]").val("身份证");
                        $("#form1 input[name=authority]").val("5");
                        $("#form1 input[name=comment]").val("丢失");
                        $("#form1 input[name=Identify]").val("卡认证");
                        $("#form1 input[name=pinCode]").val("123");
                        $("#form1 input[name=pinCodeLen]").val("5");
                        $("#form1 input[name=duressCode]").val("321");
                        $("#form1 input[name=duressCodeLen]").val("5");
                        $("#form1 input[name=duressAuthority]").val("20");

                        /*var form = liger.get("form1");
                        form.setData({memberGroup:'3', name:"aaa"});
                        var data = form.getData();
                        alert(liger.toJSON(data));
                        form.setData('memberGroup', '3');*/
                        $("#form1 input[name=memberGroup]").val("人组1");
                        $("#form1 input[name=activeStart]").val("2013-8-13 16:35:00");
                        $("#form1 input[name=activeEnd]").val("2013-12-13 00:00:00");
                        $("#form1 input[name=action]").val("尾随");
                        $("#form1 input[name=areas]").val("区域1");
                        $("#form1 input[name=description]").val("啦啦");

                    }else if(rowindex.substring(3)%3==2){
                        $("#form1 input[name=Name]").val("授权模板2");
                        $("#form1 input[name=cardId]").val("222");
                        $("#form1 input[name=type]").val("IP卡");
                        $("#form1 input[name=authority]").val("4");
                        $("#form1 input[name=comment]").val("损坏");
                        $("#form1 input[name=Identify]").val("密码认证");
                        $("#form1 input[name=pinCode]").val("456");
                        $("#form1 input[name=pinCodeLen]").val("6");
                        $("#form1 input[name=duressCode]").val("654");
                        $("#form1 input[name=duressCodeLen]").val("6");
                        $("#form1 input[name=duressAuthority]").val("30");
                        $("#form1 input[name=memberGroup]").val("人组2");
                        $("#form1 input[name=activeStart]").val("2013-6-14 12:20:00");
                        $("#form1 input[name=activeEnd]").val("2014-2-9 00:00:00");
                        $("#form1 input[name=action]").val("报警");
                        $("#form1 input[name=areas]").val("区域2");
                        $("#form1 input[name=description]").val("吼吼");

                    }else{
                        $("#form1 input[name=Name]").val("授权模板3");
                        $("#form1 input[name=cardId]").val("333");
                        $("#form1 input[name=type]").val("CPU卡");
                        $("#form1 input[name=authority]").val("3");
                        $("#form1 input[name=comment]").val("被盗");
                        $("#form1 input[name=Identify]").val("卡+密码认证");
                        $("#form1 input[name=pinCode]").val("789");
                        $("#form1 input[name=pinCodeLen]").val("3");
                        $("#form1 input[name=duressCode]").val("987");
                        $("#form1 input[name=duressCodeLen]").val("3");
                        $("#form1 input[name=duressAuthority]").val("10");
                        $("#form1 input[name=memberGroup]").val("人组3");
                        $("#form1 input[name=activeStart]").val("2013-5-13 13:40:00");
                        $("#form1 input[name=activeEnd]").val("2013-9-26 00:00:00");
                        $("#form1 input[name=action]").val("禁用");
                        $("#form1 input[name=areas]").val("区域3");
                        $("#form1 input[name=description]").val("无");
                        $("#form1 input[name=lineRule]").checked(true);
                    }

                },
                enabledEdit: true,
                clickToEdit:false,
                isScroll: false,
                data: EmployeeData,
                width: "100%",
                rownumbers:true
            });
        });

        function beginEdit(rowid) {
            if (rowid) {
                manager.beginEdit(rowid);
            } else {
                var row = manager.getSelectedRow();
                if (!row) { alert('请选择行'); return; }
                manager.beginEdit(row);
            }
        }
        function cancelEdit(rowid) { 
            manager.cancelEdit(rowid);
        }
        function endEdit(rowid)
        {
            manager.endEdit(rowid);
        }

        function deleteRow(rowid)
        {
            if (rowid) {
                if (confirm('确定删除?')) {
                    manager.deleteRow(rowid);
                }
            } else {
                if (confirm('确定删除?')) {
                    manager.deleteSelectedRow();
                }
            }
        }
        var newrowid = 100;
        function addNewRow() {
            manager.addEditRow();
        } 
         
        function getSelected() {
            var row = manager.getSelectedRow();
            if (!row) { alert('请选择行'); return; }
            alert(JSON.stringify(row));
        }
        function getData() {
            var data = manager.getData();
            alert(JSON.stringify(data));
        }
        function getIdentifyData()
        {
            return [
                {Identify:'卡认证'},
                {Identify:'密码认证' },
                {Identify:'卡+密码认证' }
            ];
        }
        function getDoorGroupData()
        {
            return [
                {DoorGroup:'门组1'},
                {DoorGroup:'门组2' },
                {DoorGroup:'门组3' }
            ];
        }
        function gettypeData()
        {
            return [
                {type:'身份证'},
                {type:'IP卡' },
                {type:'CPU卡' }
            ];
        }
        function getmemberGroupData()
        {
            return [
                {memberGroup:'人组1'},
                {memberGroup:'人组2' },
                {memberGroup:'人组3' }
            ];
        }
        function getactionData()
        {
            return [
                {action:'尾随'},
                {action:'报警' },
                {action:'禁用' }
            ];
        }
        function getcommentData()
        {
            return [
                {comment:'尾随'},
                {comment:'报警' },
                {comment:'禁用' }
            ];
        }
        function getareasData()
        {
            return [
                {areas:'A区域'},
                {areas:'B区域' },
                {areas:'C区域' }
            ];
        }
        function getRelayData()
        {
            return [
                {Relay:'触发'},
                {Relay:'无触发' }
            ];
        }
        function getAlarmData()
        {
            return [
                {Alarm:'触发'},
                {Alarm:'无触发' }
            ];
        }
    </script>
    <style type="text/css">
        .l-table-edit {}
        .l-table-edit-td{ padding:4px;}
        .l-button-submit,.l-button-reset{width:80px; float:left; margin-left:10px; padding-bottom:2px;}
        form fieldset {
            border: solid #CCCCCC 1px;
            padding: 10px;
        }
        form fieldset legend {
            padding: 0 2px;
        }

        #form_left {
            float: left;
        }

        #form_right {
            float: left;
            margin-left: 10px;
        }

        #form_left fieldset div.liger-form {
            width: 360px;;
        }
        #form_right fieldset div.liger-form {
            width: 200px;;
        }
    </style>

</head>
<body  id="layout1" style="width:100%; margin:0 auto;">

    <a class="l-button" style="float:left; margin-left:6px; padding: 2px 5px;" onclick="addNewRow()">添加人员</a>
    <a class="l-button" style="float:left; margin-left:6px; padding: 2px 5px;">批量导入</a>
    <!--<a class="l-button" style="float:left; margin-left:6px; padding: 2px 5px;" onclick="beginEdit()">修改</a>-->
    <!--<a class="l-button" style="float:left; margin-left:6px; padding: 2px 5px;" onclick="deleteRow()">删除</a>-->

    <div class="l-clear"></div>
    <div style="position:absolute; left: 5px; top: 35px; bottom: 5px; width: 450px; border:1px solid #ccc; overflow:auto;  ">
        <ul id="maingrid" style="border: none;">
        </ul>
    </div>
    <div style="position:absolute; left: 462px; right: 5px; top: 35px; bottom: 5px; border:1px solid #ccc; overflow:auto; padding: 5px;">
        <div id="dialog_target"  style="margin:5px;">
        <form id="form1" name="form1" method="post" action="">
            <div id="form_left" name="left">

                <fieldset>
                    <legend>基本信息</legend>

                    <div class="liger-form" data-inputwidth="100"  data-labelwidth="60">
                        <div class="fields">
                            <input data-type="text" data-label="名称" name="Name" />
                            <div data-type="select" data-label="认证方式" data-name="Identify" data-textField="Identify" data-newline="false">
                                  <input class="editor"  data-data="getIdentifyData()"  data-textField="Identify" data-valueField="Identify"/>
                             </div>
                            <div data-type="select" data-label="人组" data-name="memberGroup" data-textField="memberGroup" >
                                 <input class="editor"  data-data="getmemberGroupData()"  data-textField="memberGroup" data-valueField="memberGroup"/>
                            </div>
                            <div data-type="select" data-label="证章模板" data-name="badgeTemplate" data-textField="badgeTemplate" data-newline="false">
                                <input class="editor"/>
                            </div>
                            <div data-type="select" data-label="动作" data-name="action" data-textField="action" >
                                 <input class="editor"  data-data="getactionData()"  data-textField="action" data-valueField="action"/>
                            </div>
                            <input data-type="text" data-label="描述" name="description" data-textField="description" data-newline="false"/>
                    </div>

                     </div>

                </fieldset>

                <fieldset>
                    <legend>卡信息</legend>
                    <div class="liger-form" data-inputwidth="100"  data-labelwidth="60">
                        <div class="fields">
                            <input data-type="number" data-label="卡号" name="cardId"/>
                            <div data-type="select" data-label="卡类型" data-name="type" data-textField="type" data-newline="false">
                                     <input class="editor"  data-data="gettypeData()"  data-textField="type" data-valueField="type"/>
                            </div>
                            <input data-type="number" data-label="卡等级" name="authority" />
                            <div data-type="select" data-label="卡附加属性" data-name="comment" data-textField="comment" data-newline="false">
                                <input class="editor" data-data="getcommentData()" data-textField="comment" data-valueField="comment"/>
                            </div>
                        </div>

                    </div>

                </fieldset>

                <fieldset>
                    <legend>时间信息</legend>

                    <div class="liger-form" data-inputwidth="150"  data-labelwidth="120">
                        <div class="fields">
                            <input data-type="date" data-label="生效时间" data-name="activeStart" data-editor="{showTime:true}" />
                            <input data-type="date" data-label="失效日期" data-name="activeEnd" data-editor="{showTime:true}" />
                            <input data-type="number" data-label="延长开门时间(秒)" name="accessTimeExtension" />
                        </div>

                    </div>

                </fieldset>
                <div style="clear: both;"></div>
            </div>
            <div id="form_right" name="right">

                <fieldset>
                    <legend>密码信息</legend>

                    <div class="liger-form" data-labelwidth="100" data-inputwidth="80">
                        <div class="fields">
                            <input data-type="number" data-label="pin码" name="pinCode"/>
                            <input data-type="number" data-label="pin码长度" name="pinCodeLen" />
                            <input data-type="number" data-label="胁迫码" name="pinCode"/>
                            <input data-type="number" data-label="胁迫码长度" name="pinCodeLen" />
                            <input data-type="number" data-label="胁迫等级(0-99)" name="duressAuthority"/>
                        </div>

                    </div>

                </fieldset>
                <fieldset>
                    <legend>规则信息</legend>

                    <div class="liger-form" data-inputwidth="100">
                        <div class="fields">
                            <input data-type="checkbox" data-label="时间规则特权" name="timeRule" />
                            <input data-type="checkbox" data-label="多人规则特权" name="abRule"/>
                            <input data-type="checkbox" data-label="潜回特权" name="lineRule"/>
                            <div data-type="select" data-label="允许通过区域" data-name="areas" data-textField="areas" data-inputwidth="100">
                                <input class="editor" data-data="getareasData()" data-textField="areas" data-valueField="areas"/>
                            </div>
                        </div>

                    </div>

                </fieldset>

                <div style="clear: both;"></div>
            </div>

            <div style="clear: both; padding-top: 10px;">
                <input type="submit" value="提交" class="l-button l-button-submit" />
                <input type="reset" value="重置" class="l-button l-button-reset"/>
                <br class="l-clear" />
            </div>
        </form>
    </div>

      <!-- g data total ttt -->
    </div>
</body>
</html>
